<template>
  <view class="result-wrapper-pos">
      <scroll-view class="main-wrapper" :show-scrollbar="true" scroll-y="true">
        <view>
          <view class="tit-box">
            <image class="img" :src="staticImgs.tit" mode="widthFix"></image>
          </view>
          <view class="date-box">
            诊断日期：{{report.createTime || ""}}
          </view>
          <view class="conclusion-box"
            :style="{
                  backgroundImage:'url('+staticImgs.conclusionBg+')'
               }"
          >
            {{report.tit || ""}}
          </view>
          
          <view class="result-box">
            <view class="p" v-if="report.detailStr">{{report.detailStr}}</view>
            <template v-else-if="report.details">
              <view class="p-box" v-for="(p,index) in report.details" :key="index">
                <view v-if="p.p" class="t">{{p.p}}</view>
                <view v-if="p.t" class="p">{{p.t}}</view>
              </view>
            </template>
          </view>
        </view>
      </scroll-view>
      
      <view class="btn-wrapper"
        :style="{
            backgroundImage:'url('+staticImgs.btnBg+')'
         }"
         @click="toResultPage"
      >
        查看详细报告
      </view>
  </view>
</template>

<script>
  export default{
    props:{
      reportId:'',
      report:{}
    },
    data(){
      return {
        staticImgs:{
          tit:this.imgBaseURL + '/scl/checkup-depressed/qxwtzdsc-tit.png',
          btnBg:this.imgBaseURL + '/scl/checkup-depressed/btn-bg-1.png',
          conclusionBg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-res-info-bg.png',
        },
        pArr:[
          '通过测评结果看，你的心理状态良好，未显示抑郁倾向。在抑郁方面的评估上，各项指标均处于正常范围，说明你能够积极应对生活与工作中的压力，具备良好的自我调节能力和积极的生活态度。',
          '希望你可以继续保持当前心态~同时积极参与社交活动，保持健康的生活习惯，这样可以进一步促进心理健康哦~'
        ],
        details:{},
      }
    },
    watch:{
      report:{
        handler(val){
          // this.details = val.details
        },
        immediate:true
      }
    },
    methods:{
      toResultPage(){
        console.log(this.reportId)
        this.$emit('nav')
        uni.navigateTo({
          url: '/subcontractorB/pages/sclResult/sclResult?id=' + this.reportId + '&sclReportType=2&showBackBtn=true'
        })
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  .result-wrapper-pos{
    width: 682rpx;
    height: auto;
    background: linear-gradient( 180deg, #FFFFFF 0%, #E0FFF9 100%);
    box-shadow: 0rpx 2rpx 20rpx 0rpx #3EDBBA;
    border-radius: 35rpx;
    margin: auto;
    margin-top: 24rpx;
    position: relative;
    
    .main-wrapper{
      // max-height: calc(76vh - 50rpx - 36rpx);
      height: 72vh;
      // overflow: scroll;
      // height: auto;
      box-sizing: border-box;
      position: relative;
      padding-top: 30rpx;
      padding-bottom: 154rpx;
      
      .tit-box{
        width: 350rpx;
        height: 78rpx;
        margin: auto;
        display: flex;
        align-items: center;
        
        .img{
          width: 100%;
          height: 100%;
        }
      }
      
      .date-box{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: rgba(12, 71, 59, .39);
        line-height: 45rpx;
        text-align: center;
        font-style: normal;
        
        margin-top: 10rpx;
        margin-bottom: 30rpx;
      }
      
      .conclusion-box{
        margin: auto;
        width: 611rpx;
        height: 78rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 48rpx;
        color: #0C473B;
        line-height: 78rpx;
        letter-spacing: 2px;
        text-align: center;
        font-style: normal;
      }
      
      .result-box{
        width: 610rpx;
        margin: auto;
        margin-top: 34rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #0C473B;
        line-height: 43rpx;
        letter-spacing: 1px;
        text-align: justify;
        font-style: normal;
        
        .p{
          
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #0C473B;
          line-height: 43rpx;
          letter-spacing: 1px;
          text-align: justify;
          font-style: normal;
          
        }
        
        .t{
          // font-size: ;
        }
        
        .p-box{
          margin-bottom: 24rpx;
        }
        
        .p-box:last-child{
          margin-bottom: 0;
        }
      }
      
    }
  
    .btn-wrapper{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      // bottom: 100rpx;
      bottom: 50rpx;
      
      width: 480rpx;
      height: 100rpx;
      
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      color: #FFFFFF;
      line-height: 86rpx;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;
      
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
</style>